<template>
  <div>
    <van-nav-bar title="发布帖子" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <van-form @submit="onSubmit">
        <van-field v-model="name" name="名字" label="名字" placeholder="请输入名字" />
        <van-field v-model="experience" name="经历" label="经历" placeholder="请输入详细" />
        <van-field v-model="title" name="标题" label="标题" placeholder="请输入标题" />
        <div class="Upload">
          <p>上传文字或图片是请将个人隐私信息进行隐藏</p>
          <p>(列如：姓名、身份证号、手机、病例号等隐私信息)</p>
          <van-field name="uploader" label="文件上传">
            <template #input>
              <van-uploader v-model="fileList" multiple :max-count="9" :after-read="handleImage" />
            </template>
          </van-field>
        </div>
        <van-field v-model="Diseases" name="病类" label="病类" placeholder="请输入得的什么病" />
        <div class="content-1">
          <textarea v-model="content" class="text" placeholder="写下您想说的话..."></textarea>
        </div>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit" @click="release">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from '../../utils/index'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const name = ref('')
const experience = ref('')
const title = ref('')
const Diseases = ref('')
const content = ref('')
const fileList = ref([])
const imageUrl = ref('')
const formData = new FormData()

const handleImage = async (file: any) => {
  formData.append('file', file.file)
  console.log('====================================');
  console.log(formData);
  console.log('====================================');
  await axios.post('/api/upload', formData).then((res) => {
    console.log(res)
    imageUrl.value = res.data.result
  })
}

const onSubmit = (values) => {
  console.log(values)
  console.log(content)
}
const router = useRouter()
const release = async (values) => {
  await axios.post('/api/caseAdd',{
    name:name.value,
    contentTitle:experience.value,
    title:title.value,
    case:Diseases.value,
    contents:content.value,
    images:imageUrl.value
  }).then(res=>{
    console.log('====================================');
    console.log(res);
    console.log('====================================');
    if(res.data.code==200){
      router.push('/case')
    }
  })
}

const onClickLeft = () => history.back()
</script>

<style lang="scss" scoped>
.content-1 {
  width: 100%;
  height: 300px;
  padding: 40px;
  display: flex;
  margin-bottom: 50px;
  .text {
    width: 100%;
    height: 250px;
    background: #fbfbfb;
    border: 0;
    line-height: 40px;
    padding: 10px;
    font-size: 25px;
  }
}
.Upload {
  width: 100%;
  padding: 20px;
  p {
    margin: 15px 20px;
  }
  :nth-child(1) {
    font-size: 25px;
    font-weight: 600;
  }
  :nth-child(2) {
    font-size: 25px;
    color: #909090;
  }
  .sc {
    width: 100%;
    margin-top: 50px;
  }
}
</style>